<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>michat</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script type="text/javascript" th:src="@{static/js/sdk/mimc-min_1_0_2.js}"></script>
    <!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
    <script src="https://unpkg.com/element-ui/lib/umd/locale/en.js"></script>-->
    <script th:src="@{/webjars/vue/2.6.9/dist/vue.min.js}"></script>
    <script th:src="@{/webjars/axios/0.19.0-beta.1/dist/axios.min.js}"></script>
    <link th:href="@{/webjars/element-ui/2.10.1/lib/theme-chalk/index.css}" rel="stylesheet">
    <script th:src="@{/webjars/element-ui/2.10.1/lib/index.js}"></script>
    <script th:src="@{/webjars/element-ui/2.10.1/lib/umd/locale/zh-CN.js}"></script>
    <script th:src="@{/webjars/element-ui/2.10.1/lib/umd/locale/en.js}"></script>
    <script th:src="@{/static/js/js.cookie.min.js}"></script>
    <script th:src="@{/webjars/dayjs/1.8.9/dayjs.min.js}"></script>

    <!--<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">-->
    <script th:src="@{/static/plugins/quill/1.3.6/quill.min.js}"></script>
    <script th:src="@{/static/plugins/vue-quill-editor/3.0.6/vue-quill-editor.js}"></script>
    <link rel="stylesheet" th:href="@{/static/plugins/quill/1.3.6/quill.core.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/quill/1.3.6/quill.snow.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/quill/1.3.6/quill.bubble.css}">

    <link th:href="@{/static/plugins/quill-emoji/1.0/quill-emoji.css}" rel="stylesheet">
    <script th:src="@{/static/plugins/quill-emoji/1.0/quill-emoji.js}"></script>

    <link th:href="@{/static/css/demo.css}" rel="stylesheet">
    <link th:href="@{/static/css/message.css}" rel="stylesheet">
    <script>
        // 给chatIndex.js调用的。
        loginedUser = {
            name: "",
            profilePic: ""
        };

        friendData = [
            {
                name: "simon",
                profilePic: "/static/img/simon.jpg"
            },
            {
                name: 'jack',
                profilePic: "/static/img/jack.jpg"
            },
            {
                name: 'rose',
                profilePic: "/static/img/rose.jpg"
            },
            {
                name: 'ddd',
                profilePic: "/static/img/ddd.jpg"
            },
            {
                name: 'tony',
                profilePic: "/static/img/tony.jpg"
            },
            {
                name: 'aj',
                profilePic: "/static/img/aj.jpg"
            },
            {
                name: 'adi',
                profilePic: "/static/img/adi.jpg"
            },
            {
                name: 'nike',
                profilePic: "/static/img/nike.jpg"
            },
            {
                name: 'hxrk',
                profilePic: "/static/img/hxrk.jpg"
            },
            {
                name: 'tebu',
                profilePic: "/static/img/tebu.jpg"
            },
            {
                name: 'biaoma',
                profilePic: "/static/img/biaoma.jpg"
            }
        ];
    </script>
    <script th:src="@{static/js/chatIndex.js}"></script>
</head>

<div id="app">
    <el-container ref="app">
        <el-container style="height: 100%;">
            <el-aside width='200px' style="height:100%;background-color: #2e3238;">
                <el-container>
                    <el-header style="height: 100px;background-color: #2e3238;padding: 10px; border-bottom:1px solid #24272C;">
                        <!--<div id="login">
                            &lt;!&ndash;<label>login user：</label>&ndash;&gt;
                            <input id="loginUser" type="text" readonly="readonly" />
                            &lt;!&ndash;<button id="button2" onclick="login()">登录</button>&ndash;&gt;
                            <button id="button3" onclick="logout()">退出登录</button>
                            <input id="username" type="text" style="visibility: hidden" />
                        </div>-->
                        <el-image
                                style="width: 30px; height: 30px"
                                :src="profilePic"
                                fit="fill"></el-image>
                        <input id="loginUser" v-model="loginUser.name" type="text" readonly="readonly" style="color: white; background-color: rgb(46, 50, 56);border: 0;position: absolute;left: 40px;top: 10px;width: 100px;" />

                        <el-input
                                placeholder="请输入内容"
                                prefix-icon="el-icon-search"
                                v-model="searchFriend" size="mini">
                        </el-input>
                    </el-header>
                    <el-main style="padding: 0;" ref="homePage">
                        <el-menu background-color="#2e3238"
                                 text-color="#FFFFFF"
                                 active-text-color="#FFFFFF" style="border-right: solid 0px #2e3238;">
                            <template v-for="(item, index) of friendData">
                                <el-menu-item :index="index" @click="chat(item.name)">
                                    <template slot="title">
                                        <span slot="title">{{item.name}}</span>
                                    </template>
                                </el-menu-item>
                            </template>
                        </el-menu>
                    </el-main>
                </el-container>
            </el-aside>
            <el-main style="height:100%;padding:1px;">
                <el-container ref="app">
                    <el-main ref="message" id="messageBox" style="background-color: #E9EEF3;">
                        <div id="message" class="message">
                            <ul id="tab-group" style="padding-inline-start: 20px;">

                            </ul>
                        </div>
                    </el-main>
                    <el-footer style="line-height: 0;padding:0;">
                        <div id="input" style="height: 160px;">
                            <!--<label>消息：</label>-->
                            <!--<input id="sendmessage" type="text" />-->
                            <!--<el-input
                                    type="textarea"
                                    :rows="5"
                                    placeholder="按Enter发送内容"
                                    v-model="textarea" @keyup.enter.native="sendMsg()" style="width: 100%;height: 100%">
                            </el-input>-->
                            <!--<textarea id="textarea" v-model="textarea" rows="5" placeholder="按Enter发送内容" style="width: 100%;height: 100%; border: 0;"></textarea>-->
                            <local-quill-editor v-model="textarea" ref="quillEditorB" :options="editorOption"
                                                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                                                @ready="onEditorReady($event)" style="height: 120px;">
                            </local-quill-editor>
                            <div id="sendButton">
                                <!--<button id="button1" onclick="sendMsg()">发送</button>-->
                                <el-popover
                                        placement="top"
                                        title=""
                                        width="200"
                                        trigger="manual"
                                        content="不能发送空白消息"
                                        v-model="visible">
                                    <el-button size="mini" type="primary" slot="reference" @click="sendMsg()">发送</el-button>
                                </el-popover>
                                <!--<button id="buttonpush" onclick="pushMsg()">推送</button>-->
                            </div>
                        </div>
                    </el-footer>
                </el-container>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    function delHtmlTag(str) {
        str = str.replace(/<(?!img|span|\/span).*?>/g, "");  //正则去掉所有的html标记，保留span和img标签。
        str = str.replace(/style\s*?=\s*?(['"])[\s\S]*?\1/, ""); //正则过滤掉行内样式style
        return str;
    }

    // 去掉前后空格
    function trim(str) {
        return str.replace(/(^\s*)|(\s*$)/g, "");
    }

    var toolbarOptions = {
        container: [
            ['emoji']
        ],
        handlers: {
            'emoji': function () {}
        }
    };

    var app = new Vue({
        el: '#app',
        data: {
            textarea: '',
            visible: false,
            activeName: 'second',
            clientHeight: '',
            profilePic: '/static/img/simon.jpg',
            loginUser: {
                name: '',
                profilePic: ''
            },
            toUser: {
                name: '',
                profilePic: ''
            },
            searchFriend: '',
            friendData: friendData,
            editorOption: {
                modules: {
                    "toolbar": toolbarOptions,
                    "emoji-toolbar": true,
                    "emoji-shortname": true
                },
                theme: 'snow'
            }
        },
        components: {
            LocalQuillEditor: VueQuillEditor.quillEditor
        },
        mounted: function () {
            var mimc_appAccount = Cookies.get("mimc_appAccount");
            console.log("mimc_appAccount=" + mimc_appAccount);
            if (mimc_appAccount && "" !== mimc_appAccount) {
                console.log(mimc_appAccount + "自动登录");
                this.loginUser.name = mimc_appAccount;
                for(let i = 0, len = this.friendData.length; i < len; i++) {
                    if (mimc_appAccount === this.friendData[i].name) {
                        loginedUser = this.friendData[i];
                        this.loginUser.name = this.friendData[i].name;
                        this.loginUser.profilePic = this.friendData[i].profilePic;
                        this.profilePic = this.friendData[i].profilePic;
                        break;
                    }
                }
                console.log(this.loginUser.profilePic);
                login(mimc_appAccount);
            }

            // 初始化对话框
            let tabGroup = document.getElementById("tab-group");
            for(let i = 0, len = this.friendData.length; i < len; i++) {
                let tab = document.createElement("li");
                tab.id = "user-" + this.friendData[i].name;
                if (0 === i) {
                    tab.className = "mod mod-active";
                } else {
                    tab.className = "mod";
                }
                /*let p = document.createElement("p");
                p.innerHTML = this.friendData[i].name;
                tab.appendChild(p);*/
                tabGroup.appendChild(tab);
            }

            Cookies.set("toUser", this.friendData[0].name);


            // 获取浏览器可视区域高度
            this.clientHeight =   `${document.documentElement.clientHeight}`;
            //document.body.clientWidth;
            //console.log(self.clientHeight);
            window.onresize = function temp() {
                this.clientHeight = `${document.documentElement.clientHeight}`;
            };

            console.log('this is quill A instance object', this.editorA, 'B instance', this.editorB)
        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            clientHeight: function () {
                this.changeFixed(this.clientHeight)
            }
        },
        methods: {
            onEditorBlur(quill) {
                console.log('editor blur!', quill)
            },
            onEditorFocus(quill) {
                console.log('editor focus!', quill)
            },
            onEditorReady(quill) {
                console.log('editor ready!', quill)
            },
            sendMsg: function () {
                //var toUser = Cookies.get("toUser");
                if (!this.toUser.name || "" === this.toUser.name) {
                    this.$message.error('请选择对方账号');
                } else {
                    // 内容去标签和去两边空格（保留span标签，用于emoji表情。）
                    let msgContent = trim(delHtmlTag(this.textarea));
                    if ("" === msgContent) {
                        this.visible = true;
                        setTimeout(function () {
                            app.visible = false;
                        }, 2000);
                    } else {
                        //let mimc_appAccount = Cookies.get("mimc_appAccount");
                        if (this.loginUser.name === this.toUser.name) {
                            this.$message.error("不能给自己发送消息");
                        } else {
                            this.visible = false;
                            sendMsg(this.toUser, msgContent);
                            this.textarea = "";
                        }
                    }
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            chat(friend) {
                /*var message = document.getElementById("message");
                var ul = document.createElement("ul");
                ul.id = friend;
                message.appendChild(ul);
                document.getElementById("username").value = friend;*/
                //document.getElementById("username").value = friend;
                //Cookies.set("toUser", friend);
                let index = -1;
                console.log(friend);
                for(let i = 0, len = this.friendData.length; i < len; i++) {
                    if (friend === this.friendData[i].name) {
                        index = i;
                        this.toUser.name = this.friendData[i].name;
                        this.toUser.profilePic = this.friendData[i].profilePic;
                        break;
                    }
                }

                let tabGroup = document.getElementById("tab-group");
                let tabs = tabGroup.getElementsByClassName("mod");
                for (let i = 0, len = tabs.length; i < len; i++) {
                    tabs[i].className = "mod";
                    if (index === i) {
                        tabs[i].className = "mod mod-active";
                    }
                }
            },
            changeFixed(clientHeight){ //动态修改样式
                // console.log(clientHeight);
                // console.log(this.$refs.homePage.$el.style.height);
                this.$refs.homePage.$el.style.height = clientHeight-100+'px';
                this.$refs.message.$el.style.height = clientHeight-165+'px';
                this.$refs.app.$el.style.height = clientHeight+'px';
            },
        },
        computed: {
            editorB() {
                return this.$refs.quillEditorB.quill
            }
        },
    });

    /*document.getElementById("textarea").onkeydown=function(e){
        if(e.keyCode == 13 && e.ctrlKey){
            document.getElementById("a").value += "\n";
        }else if(e.keyCode == 13){
            // 避免回车键换行
            e.preventDefault();
            // 下面写你的发送消息的代码
            app.sendMsg();
        }
    }*/
</script>


</html>